<template>
	<div class="form">
		<div>
			<el-input v-model="filterData.name" placeholder="姓名"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-input v-model="filterData.job" placeholder="职业"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<p>
				年龄：
				<el-input v-model="filterData.startAge" placeholder="开始年龄"></el-input>&nbsp;&nbsp;到&nbsp;&nbsp;
				<el-input v-model="filterData.endAge" placeholder="结束年龄"></el-input>
			</p>
			<p>性别:
				<el-select v-model="filterData.sex" placeholder="请选择">&nbsp;&nbsp;&nbsp;&nbsp;
					<el-option v-for="item in sexSelect" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</p>
			<p>时间：
				<el-date-picker
			      	v-model="filterData.dates"
			      	type="datetimerange"
			      	:default-time="['12:00:00', '23:59:59']"
			      	align="right"
			      	unlink-panels
			      	range-separator="至"
			      	start-placeholder="开始日期"
			      	end-placeholder="结束日期"
			      	:picker-options="pickerOptions2"
			      	value-format="timestamp">
			    </el-date-picker>
			</p>
		    
			<p style='margin-bottom: 20px;'>
				<el-button type="info" @click='query'>查询</el-button>
				<el-button type="info" @click="reset">重置</el-button>
			</p>
			<el-table border :data="tableData" style="width: 100%">
				<el-table-column type="index"width="50" label="序号" >					
				</el-table-column>
				<el-table-column prop="memberId" label="会员编号" width="100">
				</el-table-column>
				<el-table-column prop="name" label="会员姓名" width="80">
				</el-table-column>
				<el-table-column prop="phone" label="手机号" width="150">
				</el-table-column>
				<el-table-column prop="sex" label="性别" width="200" :formatter="formSex">
				</el-table-column>
				<el-table-column prop="age" label="年龄">
				</el-table-column>
				<el-table-column prop="idCard" label="身份证号" width="250">
				</el-table-column>
				<el-table-column prop="job" label="职业">
				</el-table-column>
				<el-table-column prop="acceptTaskCount" label="已接任务数" width="120">
				</el-table-column>
				<!--<el-table-column prop="amount" label="已接任务额度" width="80">
				</el-table-column>-->
				<el-table-column prop="consumeNumber" label="提现金额(元)" width="150">
				</el-table-column>		
				<el-table-column prop="commission" label="获得佣金" width="110">
				</el-table-column>
			</el-table>		
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
					   :current-page="filterData.current" :current-page.sync="filterData.current" 
					   :page-sizes="[10, 15, 20, 30]" :page-size="filterData.size" 
					   layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>				
	</div>
</template>

<script type="text/javascript">
	import {memberPage,pickerOptions2,formatter} from '@/api/common'
	export default {
		created(){
			this.query();
		},
		methods: {
			handleSizeChange(val) {
				this.filterData.size = val;
				this.query();
			},
			handleCurrentChange(val) {
				this.filterData.current = val;
				this.query();
			},
			
			formSex(row, column){		
				return(formatter(row.sex,this.sexSelect))
			},				
			query(){											//查询
				memberPage(this.filterData).then(res =>{
					console.log(res)
					this.tableData = res.data.records;
					this.total = parseInt(res.data.total);
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},			
			reset(){										//重置
				this.filterData = {					 
					dates: [],
					endAge: null,
					job: "",
					name: "",
					sex: null,
					startAge: null,
					current:1,
					size:10,
				}
				this.query();
			},			
		},
		data() {
			return {
				//主列表数据
				filterData:{	
					dates: [],
					endAge: null,
					job: "",
					name: "",
					sex: null,
					startAge: null,
					current:1,
					size:10,
				},
				tableData: [],				//主列表数据
				total:null,

				sexSelect: [{ 						//性别下拉框
					value: 1,
					label: '男'
				}, {
					value: 0,
					label: '女'
				}],				
				pickerOptions2: pickerOptions2
			}
		}
	}
</script>

<style scoped="scoped">
	.el-input{
		width:200px;
		margin-bottom: 20px;
	}
	.el-input {
		width:200px
	}
	.form p {
		display: inline-block;
		padding: 0;
		margin: 0;
	}
	
	.area-select-wrap {
		display: inline-block;
		margin-right: 20px;
		margin-left: 0;
	}
	
	.area-select-wrap .area-select {
		height: 40px;
		vertical-align: middle;
	}
	.el-date-editor {
		margin-bottom:20px
	}
</style>